<template>
    <yplayout v-if="isload">
        <template #header="head">
        <div class="flex items-center w-full px-2">
            <i class="ri-lg text-gray-500" :class="head.meta.icon"></i>
            <div class="text-lg px-3">栏目管理</div>
            <div class="flex-1"></div>
            <div>
                <router-link to="add" class="btn btn-hong">增加</router-link>
            </div>
        </div>
      </template>
      <template #list>
      <div class="border-t border-l border-r">
        <div class="flex items-center font-bold space-x-3 border-b bg-gray-50">
          <div class="p-2 w-52">栏目名称</div>
          <div class="p-2 w-36">栏目ID</div>
          <div class="flex-1"></div>
          <div class="p-2 w-36 text-center">操作</div>
        </div>

        <template v-for="(item,index) in dataList" :key="index">
          <CategoryItem :item="item" @changeMenu="menuEvent(item)"></CategoryItem>
            <template v-if="item.children&&item.children.length>0">
                <transition v-bind="hanimation">
                    <div v-show="openList.indexOf(item.id)>=0" class="menubox">
                        <Children :listItem="item.children" :openList="openList" :deep="1"></Children>
                    </div>
                </transition>
            </template>
        </template>

      </div>
    </template>
    </yplayout>
</template>

<script setup>
    import {getData,postData,alter} from '@/common/base'
    import {ref,reactive,onMounted} from 'vue'
    import CategoryItem from './categoryitem.vue'
    import Children from './children.vue'

    const isload=ref(false)
    const mod=reactive({})
    const getMod=async()=>{
        const resp= await getData('mod/getMod',{'name':'category'})
        if(resp.code==1){
            for(let i in resp.data){
                mod[i]=resp.data[i]
            }
        }

    }

    //数据对象
    const dataList=reactive([])
    //获取数据
    const getList = async () => {
        dataList.length = 0
        const res = await getData('category/getList')
        if (res.code == 1) {
            res.data.map((item) => {
                dataList.push(item)
            })
        }
    }

    onMounted(async()=>{
        await getMod()
        await getList()
        isload.value=true
        
    })

</script>